<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学习SVG</title>
</head>

<body>
    <div style="margin-top: 20px;margin-left: 20px;">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="460px" width="240px" id="svg-container"></svg>
    </div>
    <div class="my-pop" id="myPop">
        <p>id:
            <span>12</span>
        </p>
        <p>val:
            <span>123</span>
        </p>

    </div>
    <style>
        #svg-container {
            width: 240px;
            height: 460px;
            border: 1px solid #666;
        }

        .my-pop p {
            margin-left: 20px;
            margin-bottom: 6px;
            margin-top: 0px;
        }

        .my-pop {
            min-height: 80px;
            width: 120px;
            position: fixed;
            border-radius: 4px;
            left: 50px;
            font-size: 15px;
            top: 50px;
            color: #FFF;
            display: none;
            padding-top: 20px;
            padding-bottom: 10px;
            box-sizing: border-box;
            background-color: rgba(0, 0, 0, 0.6)
        }
    </style>
    <script>    
        var datas = [100, 50, 120, 80, 90, 79, 40, 80, 50, 70, 40, 60, 60, 50, 70, 50, 40, 70, 200]
        var color = ['#1C8AFA', '#3AC9D6']
        var width = 240
        var height = 460
        var pieces = 100
        var dom = document.getElementById("svg-container")
        var calcDatas = calcData(datas);
        calcDatas.map((item, index) => {
            createRect(calcDatas.length - index, item.x, item.y, item.width, item.height, color[index % 2])
            creatText(item.fx, item.fy, calcDatas.length - index)
        })
        createShade();


        // var calcDatas = calcDataSpace(datas);
        // calcDatas.map((item, index) => {
        //     createRect(calcDatas.length - index, item.x, item.y, item.width, item.height, color[index % 2])
        // })
        // var calcPieces = calcLeave(datas)
        // calcPieces.map(item => {
        //     creatText(item.x, item.y, item.text)
        // })
        // createShade2();

        function calcData(arr) {
            arr = arr.reverse()
            var all = 0;
            var lastY = 0;
            var datas = []
            arr.map(item => {
                all += item
            })
            arr.map(item => {
                var h = height / all * item
                datas.push({
                    x: 20,
                    y: lastY,
                    width: width - 20,
                    height: h,
                    fx: 3,
                    fy: lastY + h / 2 + 6
                })
                lastY += h
            })
            return datas
        }


        function calcDataSpace(arr) {
            arr = arr.reverse()
            var all = 0;
            var lastY = 0;
            var datas = []
            arr.map(item => {
                all += item
            })
            arr.map((item, index) => {
                var h = height / all * item
                datas.push({
                    x: 30,
                    y: lastY,
                    width: width - 20,
                    height: h,
                })
                lastY += h
            })
            return datas
        }

        function calcLeave(arr) {
            var all = 0;
            arr.map(item => {
                all += item
            })
            var i = all / pieces        //最多分为这么多份
            var datas = []
            for (var ii = 0; ii < i; ii++) {
                datas.push({
                    x: 3,
                    y: height - (height / all) * (all / i) * (ii + 1) + 6,
                    text: (ii + 1) * pieces
                })

            }


            return datas
        }

        function calcDataBack(arr) {
            var all = 0;
            var lastY = 0;
            var datas = []
            arr.map(item => {
                all += item
            })
            arr.map(item => {
                var h = height / all * item
                datas.push({
                    x: 20,
                    y: lastY,
                    width: width - 20,
                    height: h,
                })
                lastY += h
            })
            return datas
        }



        //绘制遮罩层2
        function createShade2() {
            var svgMap = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
            svgMap.setAttribute('x', 0)
            svgMap.setAttribute('y', 0)
            svgMap.setAttribute('points', '29,0 100,0 29,310')
            svgMap.setAttribute("style", "fill:#FFF;")
            dom.appendChild(svgMap)
        }
        //绘制遮罩层
        function createShade() {
            var svgMap = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
            svgMap.setAttribute('x', 0)
            svgMap.setAttribute('y', 0)
            svgMap.setAttribute('points', '19,0 100,0 19,310')
            svgMap.setAttribute("style", "fill:#FFF;")
            dom.appendChild(svgMap)
        }

        //绘制文本
        function creatText(x, y, text) {
            var svgMap = document.createElementNS("http://www.w3.org/2000/svg", "text")
            svgMap.setAttribute('x', x)
            svgMap.setAttribute('y', y)
            svgMap.setAttribute("style", "fill:#666;font-size:12px;line-height:12px;")
            svgMap.innerHTML = text
            dom.appendChild(svgMap)

        }
        //绘制正方形
        function createRect(id, x, y, width, height, color) {
            var svgMap = document.createElementNS("http://www.w3.org/2000/svg", "rect")
            svgMap.setAttribute("width", width)
            svgMap.setAttribute("height", height)
            svgMap.setAttribute("id", id)
            svgMap.setAttribute("x", x)
            svgMap.setAttribute("y", y)
            svgMap.setAttribute("style", "fill:" + color)
            dom.appendChild(svgMap)
            svgMap.addEventListener("click", event => {
                event.target.setAttribute("style", "fill:red")
            })

            svgMap.addEventListener("mouseenter", event => {
                event.target.setAttribute("style", "fill:rgba(200,200,255,0.5)")
            })
            svgMap.addEventListener("mousemove", event => {
                var popDom = document.getElementById("myPop")
                popDom.style.display = "block"
                popDom.getElementsByTagName("span")[0].innerText = id
                popDom.style.left = 16 + event.x + 'px'
                popDom.style.top = 16 + event.y + 'px'
            })

            svgMap.addEventListener("mouseleave", event => {
                var popDom = document.getElementById("myPop")
                popDom.style.display = "none"
                event.target.setAttribute("style", "fill:" + color)
            })
        }

    </script>
</body>

</html>